SherbyNet - /page/wikibook/entry.mu

Micron Document

<!DOCTYPE html>

<title>Design language</title>

</head>

<span id="openzim-page-title" class="mw-page-title-main"><span class="mw-page-title-main">Design language</span></span>

</h1>

</header>

/* start https://en.wikipedia.org/ */

.mw-parser-output .hatnote{font-style:italic}.mw-parser-output div.hatnote{padding-left:1.6em;margin-bottom:0.5em}.mw-parser-output .hatnote i{font-style:normal}.mw-parser-output .hatnote+link+.hatnote{margin-top:-0.5em}@media print{body.ns-0 .mw-parser-output .hatnote{display:none!important}}

/* end https://en.wikipedia.org/ */

</style><div role="note" class="hatnote navigation-not-searchable">Not to be confused with <a href="Visual_programming_language" title="Visual programming language">Visual programming language</a>, <a href="Architecture_description_language" title="Architecture description language">Architecture description language</a>, or <a href="Modeling_language" title="Modeling language">Modeling language</a>.</div>

<p>A <b>design language</b> or <b>design vocabulary</b> is an overarching scheme or style that guides the design of a complement of products or architectural settings, creating a coherent <a href="Design_system" title="Design system">design system</a> for styling.

</p>

/* start https://en.wikipedia.org/ */

.mw-parser-output .toclimit-2 .toclevel-1 ul,.mw-parser-output .toclimit-3 .toclevel-2 ul,.mw-parser-output .toclimit-4 .toclevel-3 ul,.mw-parser-output .toclimit-5 .toclevel-4 ul,.mw-parser-output .toclimit-6 .toclevel-5 ul,.mw-parser-output .toclimit-7 .toclevel-6 ul{display:none}

/* end https://en.wikipedia.org/ */

</style><div class="toclimit-3"><meta property="mw:PageProp/toc"></div>

<div class="mw-heading mw-heading2"><h2 id="Objectives">Objectives</h2></div>

<p>Designers wishing to give their suite of products a unique but consistent appearance and <a href="User_interface" title="User interface">user interface</a> can define a specification for it. The specification can describe choices for design aspects such as materials, color schemes, shapes, patterns, textures, or layouts. They then follow the scheme in the <a href="Design" title="Design">design</a> of each object in the suite.<sup id="cite_ref-design_1-0" class="reference"><a href="#cite_note-design-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup>

</p><p>Usually, design languages are not rigorously defined; the designer basically makes one thing similarly as another. In other cases, they are followed strictly, so that the products gain a strong thematic quality. For example, although there is a great variety of unusual <a href="Chess_piece" title="Chess piece">chess set</a> designs, the pieces within a set are typically thematically consistent.

</p><p>Sometimes, designers encourage others to follow their design languages when decorating or accessorizing.

</p>

<div class="mw-heading mw-heading2"><h2 id="Industrial_design">Industrial design</h2></div>

<p><a href="Industrial_design" title="Industrial design">Industrial design</a> is the process of designing products for mass production. A design language can provide a range of products a similar style that sets it apart from competitors.

</p><p>In <a href="Automotive_design" title="Automotive design">automotive design</a>, the design language often uses a signature <a href="Grille_(car)" title="Grille (car)">grille</a> design. For instance, many <a href="BMW" title="BMW">BMW</a> vehicles share a design language, including front-end styling consisting of a split "kidney grille" and four circular headlights.<sup id="cite_ref-design_1-1" class="reference"><a href="#cite_note-design-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup> Some manufacturers have appropriated design language cues from rival firms.<sup id="cite_ref-2" class="reference"><a href="#cite_note-2"><span class="cite-bracket">[</span>2<span class="cite-bracket">]</span></a></sup>

</p>

<div class="mw-heading mw-heading3"><h3 id="Examples">Examples</h3></div>

<p>In the 1980s, <a href="Memphis_design" class="mw-redirect" title="Memphis design">Memphis design</a> became widely popular.<sup id="cite_ref-3" class="reference"><a href="#cite_note-3"><span class="cite-bracket">[</span>3<span class="cite-bracket">]</span></a></sup>

</p><p><a href="Apple_Inc." title="Apple Inc.">Apple</a> used the <a href="Snow_White_design_language" title="Snow White design language">Snow White design</a> for its home computers in the 1980s, which used parallel stripes to give the impression that the enclosure was smaller than it actually was.<sup id="cite_ref-4" class="reference"><a href="#cite_note-4"><span class="cite-bracket">[</span>4<span class="cite-bracket">]</span></a></sup> The <a href="Apple_Industrial_Design_Group" title="Apple Industrial Design Group">Apple Industrial Design Group</a> is responsible for the industrial design of all Apple products.

</p><p>Cadillac introduced the <a href="Cadillac#The_Art_and_Science_era:_2000–present" title="Cadillac">Art and Science</a> design philosophy in 2000, which emphasized sharp and crisp edges — what noted automotive journalist <a href="Dan_Neil_(journalist)" title="Dan Neil (journalist)">Dan Neil</a> described as a "fractal geometric style."<sup id="cite_ref-neil_5-0" class="reference"><a href="#cite_note-neil-5"><span class="cite-bracket">[</span>5<span class="cite-bracket">]</span></a></sup>

</p><p><a href="Ford_Motor_Company" title="Ford Motor Company">Ford</a> used the <a href="New_Edge_(design_language)" title="New Edge (design language)">New Edge</a> design language in the 1990s and early 2000s, which combined intersecting arcs to create soft aerodynamic shapes. Later Ford used <a href="Ford_Kinetic_Design" title="Ford Kinetic Design">Kinetic Design</a> that featured a large lower trapezoidal grill on many vehicles.

</p><p><a href="Mazda" title="Mazda">Mazda</a> has used the <a href="Mazda_Nagare_(car_design)" title="Mazda Nagare (car design)">Nagare</a> design language, which used flowing lines influenced by wind.<sup id="cite_ref-6" class="reference"><a href="#cite_note-6"><span class="cite-bracket">[</span>6<span class="cite-bracket">]</span></a></sup> Mazda later used the Kodo design language.<sup id="cite_ref-7" class="reference"><a href="#cite_note-7"><span class="cite-bracket">[</span>7<span class="cite-bracket">]</span></a></sup>

</p><p>Other examples include the Dynamic Shield design language used by <a href="Mitsubishi" title="Mitsubishi">Mitsubishi</a>,<sup id="cite_ref-8" class="reference"><a href="#cite_note-8"><span class="cite-bracket">[</span>8<span class="cite-bracket">]</span></a></sup> and Dynamic x Solid used by <a href="Subaru" title="Subaru">Subaru</a>.<sup id="cite_ref-9" class="reference"><a href="#cite_note-9"><span class="cite-bracket">[</span>9<span class="cite-bracket">]</span></a></sup>

</p>

<div class="mw-heading mw-heading2"><h2 id="Software">Software</h2></div>

<p>In the context of <a href="Graphical_user_interface" title="Graphical user interface">graphical user interfaces</a>, for example, <a href="Human_interface_guidelines" title="Human interface guidelines">human interface guidelines</a> can be thought of as design languages for applications.<sup id="cite_ref-10" class="reference"><a href="#cite_note-10"><span class="cite-bracket">[</span>10<span class="cite-bracket">]</span></a></sup>

</p>

<div class="mw-heading mw-heading3"><h3 id="Examples_2">Examples</h3></div>

<p><a href="Apple_Inc." title="Apple Inc.">Apple</a> has created some software design languages. Since 1997, the <a href="Appearance_Manager" title="Appearance Manager">Platinum</a> design language was used for <a href="Mac_OS_8" title="Mac OS 8">Mac OS 8</a> and <a href="Mac_OS_9" title="Mac OS 9">9</a> and emphasized various shades of gray. From 2000 onwards, the <a href="Aqua_(user_interface)" title="Aqua (user interface)">Aqua</a> design language was introduced with <a href="Mac_OS_X_10.0" title="Mac OS X 10.0">Mac OS X 10.0</a> and emphasized flatter interface elements and liberal use of reflection effects and transparency.<sup id="cite_ref-11" class="reference"><a href="#cite_note-11"><span class="cite-bracket">[</span>11<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-12" class="reference"><a href="#cite_note-12"><span class="cite-bracket">[</span>12<span class="cite-bracket">]</span></a></sup> <a href="Brushed_metal_(interface)" class="mw-redirect" title="Brushed metal (interface)">Brushed metal</a>, first used in 1999, was intended for programs such as <a href="QuickTime_Player" class="mw-redirect" title="QuickTime Player">QuickTime Player</a> that mimic the operation or interface of common devices. In June 2025 during <a href="WWDC_2025" class="mw-redirect" title="WWDC 2025">WWDC 2025</a>, Apple introduce a new unified design language known as <a href="Liquid_Glass" title="Liquid Glass">Liquid Glass</a> across Apple platforms featuring an optical properties of glass with a sense of fluidity.<sup id="cite_ref-13" class="reference"><a href="#cite_note-13"><span class="cite-bracket">[</span>13<span class="cite-bracket">]</span></a></sup>

</p><p><a href="Microsoft" title="Microsoft">Microsoft</a> has used the <a href="Windows_Aero" title="Windows Aero">Aero</a> design language for <a href="Windows_Vista" title="Windows Vista">Windows Vista</a> and <a href="Windows_7" title="Windows 7">Windows 7</a> which appeared in 2006. The Aero design language used semitransparent glass like window borders as a distinctive feature. The <a href="Metro_(design_language)" title="Metro (design language)">Metro design language</a> focused on simplified icons, absence of clutter and basic shapes. Metro was used in many Microsoft products including <a href="Windows_8" title="Windows 8">Windows 8</a>, <a href="Windows_Phone_7" title="Windows Phone 7">Windows Phone 7</a>, the <a href="Xbox_360" title="Xbox 360">Xbox 360</a> and <a href="Xbox_One" title="Xbox One">Xbox One</a>.<sup id="cite_ref-wired-metro_14-0" class="reference"><a href="#cite_note-wired-metro-14"><span class="cite-bracket">[</span>14<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-15" class="reference"><a href="#cite_note-15"><span class="cite-bracket">[</span>15<span class="cite-bracket">]</span></a></sup> The <a href="Fluent_Design_System" title="Fluent Design System">Fluent Design System</a> was developed as a revamp of Metro in 2017, and used more motion, depth and translucency effects.<sup id="cite_ref-ars-fluentdesign_16-0" class="reference"><a href="#cite_note-ars-fluentdesign-16"><span class="cite-bracket">[</span>16<span class="cite-bracket">]</span></a></sup>

</p><p><a href="Google" title="Google">Google</a> developed <a href="Material_Design" title="Material Design">Material Design</a> in 2014 which emphasizes smooth responsive animations and transitions, padding and depth using lighting and shadows. Many of Google's products have implemented Material Design including Android, Android applications and web applications.<sup id="cite_ref-17" class="reference"><a href="#cite_note-17"><span class="cite-bracket">[</span>17<span class="cite-bracket">]</span></a></sup>

</p><p><a href="Flat_design" title="Flat design">Flat design</a> is a design language and style that simplifies elements and colours.<sup id="cite_ref-18" class="reference"><a href="#cite_note-18"><span class="cite-bracket">[</span>18<span class="cite-bracket">]</span></a></sup> It has influenced user interface design in Microsoft's <a href="Zune" title="Zune">Zune</a>, <a href="Android_(operating_system)" title="Android (operating system)">Android</a> starting with <a href="Android_Ice_Cream_Sandwich" title="Android Ice Cream Sandwich">Android 4.0</a>,<sup id="cite_ref-verge-duarte_19-0" class="reference"><a href="#cite_note-verge-duarte-19"><span class="cite-bracket">[</span>19<span class="cite-bracket">]</span></a></sup> <a href="IOS_7" title="IOS 7">iOS 7</a><sup id="cite_ref-20" class="reference"><a href="#cite_note-20"><span class="cite-bracket">[</span>20<span class="cite-bracket">]</span></a></sup> and <a href="OS_X_Yosemite" title="OS X Yosemite">OS X Yosemite</a>.<sup id="cite_ref-ars-yosemiteui_21-0" class="reference"><a href="#cite_note-ars-yosemiteui-21"><span class="cite-bracket">[</span>21<span class="cite-bracket">]</span></a></sup>

</p><p>In 2021, the <a href="GNOME_Project" title="GNOME Project">GNOME Project</a> expanded its focus of <a href="Adwaita_(design_language)" title="Adwaita (design language)">Adwaita</a> to allow it to prosper as a design language for <a href="GNOME" title="GNOME">GNOME</a>.<sup id="cite_ref-22" class="reference"><a href="#cite_note-22"><span class="cite-bracket">[</span>22<span class="cite-bracket">]</span></a></sup>

</p>

<ul><li><a href="Complementary_architecture" title="Complementary architecture">Complementary architecture</a></li>

<li><a href="Graphic_design" title="Graphic design">Graphic design</a></li>

<li><a href="Human_interface_guidelines" title="Human interface guidelines">Human interface guidelines</a></li>

<li><a href="Object-oriented_modeling" title="Object-oriented modeling">Object-oriented modeling</a></li>

<li><a href="Pattern_language" title="Pattern language">Pattern language</a></li>

<li><a href="User_interface_design" title="User interface design">User interface design</a></li></ul>

<div class="mw-heading mw-heading2"><h2 id="References">References</h2></div>

/* start https://en.wikipedia.org/ */

.mw-parser-output .reflist{margin-bottom:0.5em;list-style-type:decimal}@media screen{.mw-parser-output .reflist{font-size:90%}}.mw-parser-output .reflist .references{font-size:100%;margin-bottom:0;list-style-type:inherit}.mw-parser-output .reflist-columns-2{column-width:30em}.mw-parser-output .reflist-columns-3{column-width:25em}.mw-parser-output .reflist-columns{margin-top:0.3em}.mw-parser-output .reflist-columns ol{margin-top:0}.mw-parser-output .reflist-columns li{page-break-inside:avoid;break-inside:avoid-column}.mw-parser-output .reflist-upper-alpha{list-style-type:upper-alpha}.mw-parser-output .reflist-upper-roman{list-style-type:upper-roman}.mw-parser-output .reflist-lower-alpha{list-style-type:lower-alpha}.mw-parser-output .reflist-lower-greek{list-style-type:lower-greek}.mw-parser-output .reflist-lower-roman{list-style-type:lower-roman}

/* end https://en.wikipedia.org/ */

</style><div class="reflist">

/* start https://en.wikipedia.org/ */

.mw-parser-output cite.citation{font-style:inherit;word-wrap:break-word}.mw-parser-output .citation q{quotes:"\"""\"""'""'"}.mw-parser-output .citation:target{background-color:rgba(0,127,255,0.133)}.mw-parser-output .id-lock-free.id-lock-free a{background:url("./mw/Lock-green.svg")right 0.1em center/9px no-repeat}.mw-parser-output .id-lock-limited.id-lock-limited a,.mw-parser-output .id-lock-registration.id-lock-registration a{background:url("./mw/Lock-gray-alt-2.svg")right 0.1em center/9px no-repeat}.mw-parser-output .id-lock-subscription.id-lock-subscription a{background:url("./mw/Lock-red-alt-2.svg")right 0.1em center/9px no-repeat}.mw-parser-output .cs1-ws-icon a{background:url("./mw/Wikisource-logo.svg")right 0.1em center/12px no-repeat}body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-free a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-limited a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-registration a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-subscription a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .cs1-ws-icon a{background-size:contain;padding:0 1em 0 0}.mw-parser-output .cs1-code{color:inherit;background:inherit;border:none;padding:inherit}.mw-parser-output .cs1-hidden-error{display:none;color:var(--color-error,#d33)}.mw-parser-output .cs1-visible-error{color:var(--color-error,#d33)}.mw-parser-output .cs1-maint{display:none;color:#085;margin-left:0.3em}.mw-parser-output .cs1-kern-left{padding-left:0.2em}.mw-parser-output .cs1-kern-right{padding-right:0.2em}.mw-parser-output .citation .mw-selflink{font-weight:inherit}@media screen{.mw-parser-output .cs1-format{font-size:95%}html.skin-theme-clientpref-night .mw-parser-output .cs1-maint{color:#18911f}}@media screen and (prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .cs1-maint{color:#18911f}}

/* end https://en.wikipedia.org/ */

</style><cite id="CITEREFBrunnerEmeryHall2009" class="citation book cs1">Brunner, Robert; Emery, Stewart; Hall, Russ (2009). <i>Do You Matter?: How Great Design Will Make People Love Your Company</i>. Pearson Education. pp. <span class="nowrap">157–</span>72. <a href="ISBN_(identifier)" class="mw-redirect" title="ISBN (identifier)">ISBN</a> <bdi>978-0-13-714244-6</bdi>.</cite></span>

</li>

<li id="cite_note-2"><span class="mw-cite-backlink"><b><a href="#cite_ref-2">^</a></b></span> <span class="reference-text"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://archive.today/20120707024602/http://www.cardesignnews.com/site/home/new_cars/display/store4/item131864/">"Car Design News Car Design Gallery on Form Language"</a>. Archived from <a rel="nofollow" class="external text" href="http://cardesignnews.com/site/home/new_cars/display/store4/item131864/">the original</a> on 2012-07-07<span class="reference-accessdate">. Retrieved <span class="nowrap">2008-09-24</span></span>.</cite></span>

</li>

<li id="cite_note-3"><span class="mw-cite-backlink"><b><a href="#cite_ref-3">^</a></b></span> <span class="reference-text"><cite id="CITEREFLevanier2021" class="citation web cs1">Levanier, Johnny (2021-02-05). <a rel="nofollow" class="external text" href="https://blog.99cluster.com/blog/design-history-movements/memphis-design/">"Memphis Design: How the Defining Look of the 1980s Is Making a Comeback"</a>. <i>99designs</i><span class="reference-accessdate">. Retrieved <span class="nowrap">2025-06-10</span></span>.</cite></span>

</li>

<li id="cite_note-4"><span class="mw-cite-backlink"><b><a href="#cite_ref-4">^</a></b></span> <span class="reference-text"><cite id="CITEREFEsslinger2013" class="citation web cs1">Esslinger, Hartmut (10 September 2013). <a rel="nofollow" class="external text" href="http://designmind.frogdesign.com/blog/snow-white-steve-jobs-and-apples-awakening-as-a-global-design-leader.html">"Keep It Simple"</a>. <i>designmind.frogdesign.com/</i><span class="reference-accessdate">. Retrieved <span class="nowrap">21 January</span> 2014</span>.</cite></span>

</li>

<li id="cite_note-neil-5"><span class="mw-cite-backlink"><b><a href="#cite_ref-neil_5-0">^</a></b></span> <span class="reference-text"><cite id="CITEREFDan_Neil2002" class="citation news cs1">Dan Neil (April 7, 2002). <a rel="nofollow" class="external text" href="https://www.nytimes.com/2002/04/07/automobiles/behind-the-wheel-2003-cadillac-cts-turning-100-sparkling-like-a-gem.html">"BEHIND THE WHEEL/2003 Cadillac CTS; Turning 100, Sparkling Like a Gem"</a>. <i><a href="The_New_York_Times" title="The New York Times">The New York Times</a></i>.</cite></span>

</li>

<li id="cite_note-6"><span class="mw-cite-backlink"><b><a href="#cite_ref-6">^</a></b></span> <span class="reference-text"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="http://www.carbodydesign.com/archive/2008/05/29-mazda-nagare-design-language/">"Mazda Nagare design language - Car Body Design"</a>. <i>www.carbodydesign.com</i><span class="reference-accessdate">. Retrieved <span class="nowrap">2017-06-12</span></span>.</cite></span>

</li>

<li id="cite_note-7"><span class="mw-cite-backlink"><b><a href="#cite_ref-7">^</a></b></span> <span class="reference-text"><cite id="CITEREFPatton2011" class="citation news cs1">Patton, Phil (2011-05-20). <a rel="nofollow" class="external text" href="https://www.nytimes.com/2011/05/22/automobiles/22KODO.html">"Mazda Designers Abandon Nagare, Embrace Kodo"</a>. <i>The New York Times</i>. <a href="ISSN_(identifier)" class="mw-redirect" title="ISSN (identifier)">ISSN</a> <a rel="nofollow" class="external text" href="https://search.worldcat.org/issn/0362-4331">0362-4331</a><span class="reference-accessdate">. Retrieved <span class="nowrap">2019-12-22</span></span>.</cite></span>

</li>

<li id="cite_note-8"><span class="mw-cite-backlink"><b><a href="#cite_ref-8">^</a></b></span> <span class="reference-text"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://web.archive.org/web/20191223001251/https://thenewswheel.com/explained-mitsubishi-dynamic-shield-design-philosophy/">"Explained: Mitsubishi's Dynamic Shield Design Philosophy"</a>. <i>The News Wheel</i>. 2016-07-20. Archived from <a rel="nofollow" class="external text" href="https://thenewswheel.com/explained-mitsubishi-dynamic-shield-design-philosophy/">the original</a> on 2019-12-23<span class="reference-accessdate">. Retrieved <span class="nowrap">2019-12-23</span></span>.</cite></span>

</li>

<li id="cite_note-9"><span class="mw-cite-backlink"><b><a href="#cite_ref-9">^</a></b></span> <span class="reference-text"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://web.archive.org/web/20191223001248/https://thenewswheel.com/dynamic-x-solid-subarus-global-architecture-explained/">"DYNAMIC X SOLID: Subaru's Global Architecture Explained"</a>. <i>The News Wheel</i>. 2016-07-19. Archived from <a rel="nofollow" class="external text" href="https://thenewswheel.com/dynamic-x-solid-subarus-global-architecture-explained/">the original</a> on 2019-12-23<span class="reference-accessdate">. Retrieved <span class="nowrap">2019-12-23</span></span>.</cite></span>

</li>

<li id="cite_note-10"><span class="mw-cite-backlink"><b><a href="#cite_ref-10">^</a></b></span> <span class="reference-text"><cite id="CITEREFWinograd1996" class="citation web cs1">Winograd, Terry (1996). <a rel="nofollow" class="external text" href="http://hci.stanford.edu/publications/bds/4p-guidelines.html">"Bringing Design to Software"</a>. <i>Stanford HCI Group</i><span class="reference-accessdate">. Retrieved <span class="nowrap">22 February</span> 2014</span>.</cite></span>

</li>

<li id="cite_note-11"><span class="mw-cite-backlink"><b><a href="#cite_ref-11">^</a></b></span> <span class="reference-text"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://web.archive.org/web/20081007191229/https://developer.apple.com/documentation/MacOSX/Conceptual/OSX_Technology_Overview/UserExperience/chapter_6_section_2.html">"Developer documentation on Aqua"</a>. Archived from <a rel="nofollow" class="external text" href="https://developer.apple.com/documentation/MacOSX/Conceptual/OSX_Technology_Overview/UserExperience/chapter_6_section_2.html">the original</a> on October 7, 2008.</cite></span>

</li>

<li id="cite_note-12"><span class="mw-cite-backlink"><b><a href="#cite_ref-12">^</a></b></span> <span class="reference-text"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://www.apple.com/newsroom/2000/07/19Apple-Introduces-iMovie-2/">"Apple Introduces iMovie 2"</a>. <i>Apple Newsroom</i>. July 19, 2000<span class="reference-accessdate">. Retrieved <span class="nowrap">June 11,</span> 2025</span>.</cite></span>

</li>

<li id="cite_note-13"><span class="mw-cite-backlink"><b><a href="#cite_ref-13">^</a></b></span> <span class="reference-text"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://developer.apple.com/documentation/technologyoverviews/liquid-glass">"Liquid Glass"</a>.</cite></span>

</li>

<li id="cite_note-wired-metro-14"><span class="mw-cite-backlink"><b><a href="#cite_ref-wired-metro_14-0">^</a></b></span> <span class="reference-text"><cite id="CITEREFChang2012" class="citation web cs1">Chang, Alexandra (8 August 2012). <a rel="nofollow" class="external text" href="https://www.wired.com/2012/08/microsoft-doesnt-need-a-name-for-its-ui-metro-or-not/">"Microsoft Doesn't Need a Name for Its User Interface"</a>. <i><a href="Wired_(website)" class="mw-redirect" title="Wired (website)">Wired</a></i>. <a href="Cond%C3%A9_Nast" title="Condé Nast">Condé Nast</a>.</cite></span>

</li>

<li id="cite_note-15"><span class="mw-cite-backlink"><b><a href="#cite_ref-15">^</a></b></span> <span class="reference-text"><cite id="CITEREFKruzeniski2011" class="citation web cs1">Kruzeniski, Mike (11 April 2011). <a rel="nofollow" class="external text" href="https://web.archive.org/web/20120314071640/http://kruzeniski.com/2011/how-print-design-is-the-future-of-interaction/">"How Print Design is the Future of Interaction"</a>. <i>Kruzeniski.com</i>. Self-published. Archived from <a rel="nofollow" class="external text" href="http://kruzeniski.com/2011/how-print-design-is-the-future-of-interaction/">the original</a> on 14 March 2012<span class="reference-accessdate">. Retrieved <span class="nowrap">11 May</span> 2021</span>.</cite></span>

</li>

<li id="cite_note-ars-fluentdesign-16"><span class="mw-cite-backlink"><b><a href="#cite_ref-ars-fluentdesign_16-0">^</a></b></span> <span class="reference-text"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://arstechnica.com/information-technology/2017/05/new-windows-look-and-feel-neon-is-officially-the-microsoft-fluent-design-system/">"New Windows look and feel, Neon, is officially the "Microsoft Fluent Design System""</a>. <i>Ars Technica</i>. 11 May 2017<span class="reference-accessdate">. Retrieved <span class="nowrap">11 May</span> 2017</span>.</cite></span>

</li>

<li id="cite_note-17"><span class="mw-cite-backlink"><b><a href="#cite_ref-17">^</a></b></span> <span class="reference-text"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://material.io/blog/google-material-custom-theme/">"Material Design"</a>. <i>Material Design</i><span class="reference-accessdate">. Retrieved <span class="nowrap">2020-09-06</span></span>.</cite></span>

</li>

<li id="cite_note-18"><span class="mw-cite-backlink"><b><a href="#cite_ref-18">^</a></b></span> <span class="reference-text"><cite id="CITEREFXavier_Bertels2014" class="citation web cs1">Xavier Bertels (March 5, 2014). <a rel="nofollow" class="external text" href="https://xavierbertels.com/blog/the-history-of-flat-design">"The History of Flat Design"</a>. <i>Xavier Bertels</i><span class="reference-accessdate">. Retrieved <span class="nowrap">December 23,</span> 2014</span>.</cite></span>

</li>

<li id="cite_note-verge-duarte-19"><span class="mw-cite-backlink"><b><a href="#cite_ref-verge-duarte_19-0">^</a></b></span> <span class="reference-text"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://web.archive.org/web/20120212191122/https://www.theverge.com/2011/10/18/exclusive-matias-duarte-ice-cream-sandwich-galaxy-nexus/">"Exclusive: Matias Duarte on the philosophy of Android, and an in-depth look at Ice Cream Sandwich"</a>. <i>The Verge</i>. <a href="Vox_Media" title="Vox Media">Vox Media</a>. Archived from <a rel="nofollow" class="external text" href="https://www.theverge.com/2011/10/18/exclusive-matias-duarte-ice-cream-sandwich-galaxy-nexus/">the original</a> on 2012-02-12<span class="reference-accessdate">. Retrieved <span class="nowrap">November 28,</span> 2011</span>.</cite></span>

</li>

<li id="cite_note-20"><span class="mw-cite-backlink"><b><a href="#cite_ref-20">^</a></b></span> <span class="reference-text"><cite id="CITEREFPavlus2013" class="citation web cs1">Pavlus, John (2013-06-10). <a rel="nofollow" class="external text" href="https://www.fastcompany.com/1672780/why-jony-ive-is-flattening-ios-7">"Why Jony Ive Is Flattening iOS 7"</a>. <i>Fast Company</i><span class="reference-accessdate">. Retrieved <span class="nowrap">2020-04-06</span></span>.</cite></span>

</li>

<li id="cite_note-ars-yosemiteui-21"><span class="mw-cite-backlink"><b><a href="#cite_ref-ars-yosemiteui_21-0">^</a></b></span> <span class="reference-text"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://arstechnica.com/apple/2014/06/os-x-yosemite-is-coming-and-it-will-redesign-the-entire-mac-desktop/">"OS X Yosemite unveiled at WWDC, features big UI overhaul"</a>. <i>Ars Technica</i>. June 2, 2014. <a rel="nofollow" class="external text" href="https://web.archive.org/web/20140603214032/http://arstechnica.com/apple/2014/06/os-x-yosemite-is-coming-and-it-will-redesign-the-entire-mac-desktop/">Archived</a> from the original on June 3, 2014<span class="reference-accessdate">. Retrieved <span class="nowrap">June 3,</span> 2014</span>.</cite></span>

</li>

<li id="cite_note-22"><span class="mw-cite-backlink"><b><a href="#cite_ref-22">^</a></b></span> <span class="reference-text"><cite id="CITEREFPlazas2021" class="citation web cs1">Plazas, Adrien (March 31, 2021). <a rel="nofollow" class="external text" href="https://web.archive.org/web/20220103025135/https://adrienplazas.com/blog/2021/03/31/introducing-libadwaita.html">"Introducing Libadwaita"</a>. Archived from <a rel="nofollow" class="external text" href="https://adrienplazas.com/blog/2021/03/31/introducing-libadwaita.html">the original</a> on January 3, 2022<span class="reference-accessdate">. Retrieved <span class="nowrap">January 3,</span> 2022</span>.</cite></span>

</li>

</ol></div></div>

<div class="mw-heading mw-heading2"><h2 id="External_links">External links</h2></div>

<ul><li><a rel="nofollow" class="external text" href="https://designsystems.surf/">Design Systems Database</a></li></ul>

/* start https://en.wikipedia.org/ */

.mw-parser-output .hlist dl,.mw-parser-output .hlist ol,.mw-parser-output .hlist ul{margin:0;padding:0}.mw-parser-output .hlist dd,.mw-parser-output .hlist dt,.mw-parser-output .hlist li{margin:0;display:inline}.mw-parser-output .hlist.inline,.mw-parser-output .hlist.inline dl,.mw-parser-output .hlist.inline ol,.mw-parser-output .hlist.inline ul,.mw-parser-output .hlist dl dl,.mw-parser-output .hlist dl ol,.mw-parser-output .hlist dl ul,.mw-parser-output .hlist ol dl,.mw-parser-output .hlist ol ol,.mw-parser-output .hlist ol ul,.mw-parser-output .hlist ul dl,.mw-parser-output .hlist ul ol,.mw-parser-output .hlist ul ul{display:inline}.mw-parser-output .hlist .mw-empty-li{display:none}.mw-parser-output .hlist dt::after{content:": "}.mw-parser-output .hlist dd::after,.mw-parser-output .hlist li::after{content:" · ";font-weight:bold}.mw-parser-output .hlist dd:last-child::after,.mw-parser-output .hlist dt:last-child::after,.mw-parser-output .hlist li:last-child::after{content:none}.mw-parser-output .hlist dd dd:first-child::before,.mw-parser-output .hlist dd dt:first-child::before,.mw-parser-output .hlist dd li:first-child::before,.mw-parser-output .hlist dt dd:first-child::before,.mw-parser-output .hlist dt dt:first-child::before,.mw-parser-output .hlist dt li:first-child::before,.mw-parser-output .hlist li dd:first-child::before,.mw-parser-output .hlist li dt:first-child::before,.mw-parser-output .hlist li li:first-child::before{content:" (";font-weight:normal}.mw-parser-output .hlist dd dd:last-child::after,.mw-parser-output .hlist dd dt:last-child::after,.mw-parser-output .hlist dd li:last-child::after,.mw-parser-output .hlist dt dd:last-child::after,.mw-parser-output .hlist dt dt:last-child::after,.mw-parser-output .hlist dt li:last-child::after,.mw-parser-output .hlist li dd:last-child::after,.mw-parser-output .hlist li dt:last-child::after,.mw-parser-output .hlist li li:last-child::after{content:")";font-weight:normal}.mw-parser-output .hlist ol{counter-reset:listitem}.mw-parser-output .hlist ol>li{counter-increment:listitem}.mw-parser-output .hlist ol>li::before{content:" "counter(listitem)"\a0 "}.mw-parser-output .hlist dd ol>li:first-child::before,.mw-parser-output .hlist dt ol>li:first-child::before,.mw-parser-output .hlist li ol>li:first-child::before{content:" ("counter(listitem)"\a0 "}

/* end https://en.wikipedia.org/ */

</style><style data-mw-deduplicate="TemplateStyles:r1236075235">

/* start https://en.wikipedia.org/ */

.mw-parser-output .navbox{box-sizing:border-box;border:1px solid #a2a9b1;width:100%;clear:both;font-size:88%;text-align:center;padding:1px;margin:1em auto 0}.mw-parser-output .navbox .navbox{margin-top:0}.mw-parser-output .navbox+.navbox,.mw-parser-output .navbox+.navbox-styles+.navbox{margin-top:-1px}.mw-parser-output .navbox-inner,.mw-parser-output .navbox-subgroup{width:100%}.mw-parser-output .navbox-group,.mw-parser-output .navbox-title,.mw-parser-output .navbox-abovebelow{padding:0.25em 1em;line-height:1.5em;text-align:center}.mw-parser-output .navbox-group{white-space:nowrap;text-align:right}.mw-parser-output .navbox,.mw-parser-output .navbox-subgroup{background-color:#fdfdfd}.mw-parser-output .navbox-list{line-height:1.5em;border-color:#fdfdfd}.mw-parser-output .navbox-list-with-group{text-align:left;border-left-width:2px;border-left-style:solid}.mw-parser-output tr+tr>.navbox-abovebelow,.mw-parser-output tr+tr>.navbox-group,.mw-parser-output tr+tr>.navbox-image,.mw-parser-output tr+tr>.navbox-list{border-top:2px solid #fdfdfd}.mw-parser-output .navbox-title{background-color:#ccf}.mw-parser-output .navbox-abovebelow,.mw-parser-output .navbox-group,.mw-parser-output .navbox-subgroup .navbox-title{background-color:#ddf}.mw-parser-output .navbox-subgroup .navbox-group,.mw-parser-output .navbox-subgroup .navbox-abovebelow{background-color:#e6e6ff}.mw-parser-output .navbox-even{background-color:#f7f7f7}.mw-parser-output .navbox-odd{background-color:transparent}.mw-parser-output .navbox .hlist td dl,.mw-parser-output .navbox .hlist td ol,.mw-parser-output .navbox .hlist td ul,.mw-parser-output .navbox td.hlist dl,.mw-parser-output .navbox td.hlist ol,.mw-parser-output .navbox td.hlist ul{padding:0.125em 0}.mw-parser-output .navbox .navbar{display:block;font-size:100%}.mw-parser-output .navbox-title .navbar{float:left;text-align:left;margin-right:0.5em}body.skin--responsive .mw-parser-output .navbox-image img{max-width:none!important}@media print{body.ns-0 .mw-parser-output .navbox{display:none!important}}

/* end https://en.wikipedia.org/ */

</style></div><div role="navigation" class="navbox" aria-labelledby="Design56" style="padding:3px"><table class="nowraplinks hlist mw-collapsible mw-collapsed navbox-inner" style="border-spacing:0;background:transparent;color:inherit"><tbody><tr><th scope="col" class="navbox-title" colspan="2"><style data-mw-deduplicate="TemplateStyles:r1239400231">

/* start https://en.wikipedia.org/ */

.mw-parser-output .navbar{display:inline;font-size:88%;font-weight:normal}.mw-parser-output .navbar-collapse{float:left;text-align:left}.mw-parser-output .navbar-boxtext{word-spacing:0}.mw-parser-output .navbar ul{display:inline-block;white-space:nowrap;line-height:inherit}.mw-parser-output .navbar-brackets::before{margin-right:-0.125em;content:"[ "}.mw-parser-output .navbar-brackets::after{margin-left:-0.125em;content:" ]"}.mw-parser-output .navbar li{word-spacing:-0.125em}.mw-parser-output .navbar a>span,.mw-parser-output .navbar a>abbr{text-decoration:inherit}.mw-parser-output .navbar-mini abbr{font-variant:small-caps;border-bottom:none;text-decoration:none;cursor:inherit}.mw-parser-output .navbar-ct-full{font-size:114%;margin:0 7em}.mw-parser-output .navbar-ct-mini{font-size:114%;margin:0 4em}html.skin-theme-clientpref-night .mw-parser-output .navbar li a abbr{color:var(--color-base)!important}@media(prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .navbar li a abbr{color:var(--color-base)!important}}@media print{.mw-parser-output .navbar{display:none!important}}

/* end https://en.wikipedia.org/ */

</style><div id="Design56" style="font-size:114%;margin:0 4em"><a href="Design" title="Design">Design</a></div></th></tr><tr><td class="navbox-abovebelow hlist" colspan="2"><div>

<ul><li><a href="Outline_of_design" title="Outline of design">Outline</a></li>

<li><a href="Designer" title="Designer">Designer</a></li></ul>

</div></td></tr><tr><td colspan="2" class="navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em"></div><table class="nowraplinks mw-collapsible mw-collapsed navbox-subgroup" style="border-spacing:0"><tbody><tr><th scope="col" class="navbox-title" colspan="2"><div id="Disciplines56" style="font-size:114%;margin:0 4em">Disciplines</div></th></tr><tr><td colspan="2" class="navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em"></div><table class="nowraplinks navbox-subgroup" style="border-spacing:0"><tbody><tr><th scope="row" class="navbox-group" style="width:1%"><a href="Communication_design" title="Communication design">Communication<br>design</a></th><td class="navbox-list-with-group navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em">

<ul><li><a href="Advertising" title="Advertising">Advertising</a></li>

<li><a href="Book_design" title="Book design">Book design</a></li>

<li><a href="Brand" title="Brand">Brand design</a></li>

<li><a href="Exhibit_design" title="Exhibit design">Exhibit design</a></li>

<li><a href="Film_title_design" title="Film title design">Film title design</a></li>

<li><a href="Graphic_design" title="Graphic design">Graphic design</a>

<ul><li><a href="Motion_graphic_design" title="Motion graphic design">Motion</a></li>

<li><a href="Postage_stamp_design" title="Postage stamp design">Postage stamp design</a></li>

<li><a href="Print_design" title="Print design">Print design</a></li></ul></li>

<li><a href="Illustration" title="Illustration">Illustration</a></li>

<li><a href="Information_design" title="Information design">Information design</a></li>

<li><a href="Instructional_design" title="Instructional design">Instructional design</a></li>

<li><a href="News_design" title="News design">News design</a></li>

<li><a href="Photography" title="Photography">Photography</a></li>

<li><a href="Retail_design" title="Retail design">Retail design</a></li>

<li><a href="Signage" title="Signage">Signage</a> / <a href="Traffic_sign_design" title="Traffic sign design">Traffic sign design</a></li>

<li><a href="Typography" title="Typography">Typography</a> / <a href="Type_design" title="Type design">Type design</a></li>

<li><a href="Video_design" title="Video design">Video design</a></li>

<li><a href="Visual_merchandising" title="Visual merchandising">Visual merchandising</a></li></ul>

</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%"><a href="Environmental_design" title="Environmental design">Environmental<br>design</a></th><td class="navbox-list-with-group navbox-list navbox-even" style="width:100%;padding:0"><div style="padding:0 0.25em">

<ul><li><a href="Architecture" title="Architecture">Architecture</a></li>

<li><a href="Architectural_lighting_design" title="Architectural lighting design">Architectural lighting design</a></li>

<li><a href="Building_design" title="Building design">Building design</a>

<ul><li><a href="Passive_solar_building_design" title="Passive solar building design">Passive solar</a></li></ul></li>

<li><a href="Ecological_design" title="Ecological design">Ecological design</a></li>

<li><a href="Environmental_impact_design" title="Environmental impact design">Environmental impact design</a></li>

<li><a href="Garden_design" title="Garden design">Garden design</a>

<ul><li><a href="Computer-aided_garden_design" title="Computer-aided garden design">Computer-aided</a></li></ul></li>

<li><a href="Healthy_community_design" title="Healthy community design">Healthy community design</a></li>

<li><a href="Hotel_design" title="Hotel design">Hotel design</a></li>

<li><a href="Interior_architecture" title="Interior architecture">Interior architecture</a></li>

<li><a href="Interior_design" title="Interior design">Interior design</a>

<li><a href="Keyline_design" title="Keyline design">Keyline design</a></li>

<li><a href="Landscape_architecture" title="Landscape architecture">Landscape architecture</a>

<ul><li><a href="Sustainable_landscape_architecture" title="Sustainable landscape architecture">Sustainable</a></li></ul></li>

<li><a href="Landscape_design" title="Landscape design">Landscape design</a></li>

<li><a href="Spatial_design" title="Spatial design">Spatial design</a></li>

<li><a href="Urban_design" title="Urban design">Urban design</a></li></ul>

</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%"><a href="Industrial_design" title="Industrial design">Industrial<br>design</a></th><td class="navbox-list-with-group navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em">

<ul><li><a href="Automotive_design" title="Automotive design">Automotive design</a></li>

<li><a href="Automotive_suspension_design_process" title="Automotive suspension design process">Automotive suspension design</a></li>

<li><a href="CMF_design" title="CMF design">CMF design</a></li>

<li><a href="Corrugated_box_design" title="Corrugated box design">Corrugated box design</a></li>

<li><a href="Electric_guitar_design" title="Electric guitar design">Electric guitar design</a></li>

<li><a href="Furniture" title="Furniture">Furniture design</a>

<ul><li><a href="Sustainable_furniture_design" title="Sustainable furniture design">Sustainable</a></li></ul></li>

<li><a href="Hardware_interface_design" title="Hardware interface design">Hardware interface design</a></li>

<li><a href="Motorcycle_design" title="Motorcycle design">Motorcycle design</a></li>

<li><a href="Packaging_and_labeling" class="mw-redirect" title="Packaging and labeling">Packaging and labeling</a></li>

<li><a href="Photographic_lens_design" title="Photographic lens design">Photographic lens design</a></li>

<li><a href="Product_design" title="Product design">Product design</a></li>

<li><a href="Production_designer" title="Production designer">Production design</a></li>

<li><a href="Sensory_design" title="Sensory design">Sensory design</a></li>

<li><a href="Service_design" title="Service design">Service design</a></li></ul>

</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%"><a href="Interaction_design" title="Interaction design">Interaction<br>design</a></th><td class="navbox-list-with-group navbox-list navbox-even" style="width:100%;padding:0"><div style="padding:0 0.25em">

<ul><li><a href="Experience_design" class="mw-redirect" title="Experience design">Experience design</a>

<li><a href="Game_design" title="Game design">Game design</a>

<ul><li><a href="Level_(video_games)" title="Level (video games)">Level design</a></li>

<li><a href="Video_game_design" title="Video game design">Video game design</a></li></ul></li>

<li><a href="Hardware_interface_design" title="Hardware interface design">Hardware interface design</a></li>

<li><a href="Icon_design" title="Icon design">Icon design</a></li>

<li><a href="Immersive_design" title="Immersive design">Immersive design</a></li>

<li><a href="Information_design" title="Information design">Information design</a></li>

<li><a href="Interactive_design" title="Interactive design">Interactive design</a></li>

<li><a href="Sonic_interaction_design" title="Sonic interaction design">Sonic interaction design</a></li>

<li><a href="User_experience_design" title="User experience design">User experience design</a></li>

<li><a href="User_interface_design" title="User interface design">User interface design</a></li>

<li><a href="Web_design" title="Web design">Web design</a></li></ul>

</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Other<br><a href="Applied_arts" title="Applied arts">applied arts</a></th><td class="navbox-list-with-group navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em">

<ul><li><a href="Public_art" title="Public art">Public art design</a></li>

<li><a href="Ceramic_art" title="Ceramic art">Ceramic</a> / <a href="Glass_art" title="Glass art">glass design</a></li>

<li><a href="Fashion_design" title="Fashion design">Fashion design</a>

<ul><li><a href="Costume_design" title="Costume design">Costume design</a></li>

<li><a href="Jewellery_design" title="Jewellery design">Jewellery design</a></li></ul></li>

<li><a href="Floral_design" title="Floral design">Floral design</a></li>

<li><a href="Game_art_design" title="Game art design">Game art design</a></li>

<li><a href="Property_designer" class="mw-redirect" title="Property designer">Property design</a></li>

<li><a href="Scenic_design" title="Scenic design">Scenic design</a></li>

<li><a href="Sound_design" title="Sound design">Sound design</a></li>

<li><a href="Lighting_design" title="Lighting design">Stage/set lighting design</a></li>

<li><a href="Textile_design" title="Textile design">Textile design</a></li></ul>

</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Other<br>design<br>& <a href="Engineering" title="Engineering">engineering</a></th><td class="navbox-list-with-group navbox-list navbox-even" style="width:100%;padding:0"><div style="padding:0 0.25em">

<ul><li><a href="Algorithm_design" class="mw-redirect" title="Algorithm design">Algorithm design</a></li>

<li><a href="Behavioural_design" title="Behavioural design">Behavioural design</a></li>

<li><a href="Boiler_design" title="Boiler design">Boiler design</a></li>

<li><a href="Database_design" title="Database design">Database design</a></li>

<li><a href="Drug_design" title="Drug design">Drug design</a></li>

<li><a href="Electrical_system_design" title="Electrical system design">Electrical system design</a></li>

<li><a href="Design_of_experiments" title="Design of experiments">Experimental design</a></li>

<li><a href="Filter_design" title="Filter design">Filter design</a></li>

<li><a href="Geometric_design" title="Geometric design">Geometric design</a></li>

<li><a href="Work_design" title="Work design">Work design</a></li>

<li><a href="Integrated_circuit_design" title="Integrated circuit design">Integrated circuit design</a>

<ul><li><a href="Circuit_design" title="Circuit design">Circuit design</a></li>

<li><a href="Physical_design_(electronics)" title="Physical design (electronics)">Physical design</a></li>

<li><a href="Power_network_design_(IC)" title="Power network design (IC)">Power network design</a></li></ul></li>

<li><a href="Mechanism_design" title="Mechanism design">Mechanism design</a></li>

<li><a href="Nuclear_weapon_design" title="Nuclear weapon design">Nuclear weapon design</a></li>

<li><a href="Nucleic_acid_design" title="Nucleic acid design">Nucleic acid design</a></li>

<li><a href="Organizational_architecture" title="Organizational architecture">Organization design</a></li>

<li><a href="Process_design" title="Process design">Process design</a></li>

<li><a href="Processor_design" title="Processor design">Processor design</a></li>

<li><a href="Protein_design" title="Protein design">Protein design</a></li>

<li><a href="Research_design" title="Research design">Research design</a></li>

<li><a href="Social_design" title="Social design">Social design</a></li>

<li><a href="Software_design" title="Software design">Software design</a></li>

<li><a href="Spacecraft_design" title="Spacecraft design">Spacecraft design</a></li>

<li><a href="Strategic_design" title="Strategic design">Strategic design</a></li>

<li><a href="Systems_design" title="Systems design">Systems design</a></li>

<li><a href="Test_design" title="Test design">Test design</a></li></ul>

</div></td></tr></tbody></table><div></div></td></tr></tbody></table><div></div></td></tr><tr><td colspan="2" class="navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em"></div><table class="nowraplinks mw-collapsible mw-collapsed navbox-subgroup" style="border-spacing:0"><tbody><tr><th scope="col" class="navbox-title" colspan="2"><div id="Approaches56" style="font-size:114%;margin:0 4em">Approaches</div></th></tr><tr><td colspan="2" class="navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em">

<ul><li><a href="Active_design" title="Active design">Active</a></li>

<li><a href="Activity-centered_design" title="Activity-centered design">Activity-centered</a></li>

<li><a href="Adaptive_web_design" title="Adaptive web design">Adaptive web</a></li>

<li><a href="Affective_design" title="Affective design">Affective</a></li>

<li><a href="Brainstorming" title="Brainstorming">Brainstorming</a></li>

<li><a href="Design_by_committee" title="Design by committee">By committee</a></li>

<li><a href="Design_by_contract" title="Design by contract">By contract</a></li>

<li><a href="C-K_theory" title="C-K theory">C-K theory</a></li>

<li><a href="Design_closure" title="Design closure">Closure</a></li>

<li><a href="Configuration_design" title="Configuration design">Configuration</a></li>

<li><a href="Contextual_design" title="Contextual design">Contextual</a></li>

<li><a href="Continuous_design" title="Continuous design">Continuous</a></li>

<li><a href="Cradle-to-cradle_design" title="Cradle-to-cradle design">Cradle-to-cradle</a></li>

<li><a href="Creative_problem-solving" title="Creative problem-solving">Creative problem-solving</a></li>

<li><a href="Creativity_techniques" title="Creativity techniques">Creativity techniques</a></li>

<li><a href="Critical_design" title="Critical design">Critical</a>

<ul><li><a href="Design_fiction" title="Design fiction">Design fiction</a></li></ul></li>

<li><a href="Defensive_design" title="Defensive design">Defensive</a></li>

<li><a href="Design%E2%80%93bid%E2%80%93build" title="Design–bid–build">Design–bid–build</a></li>

<li><a href="Design%E2%80%93build" title="Design–build">Design–build</a>

<ul><li><a href="Architect-led_design%E2%80%93build" class="mw-redirect" title="Architect-led design–build">architect-led</a></li></ul></li>

<li><a href="Diffuse_design" title="Diffuse design">Diffuse</a></li>

<li><a href="Domain-driven_design" title="Domain-driven design">Domain-driven</a></li>

<li><a href="Ecological_design" title="Ecological design">Ecological design</a></li>

<li><a href="Energy_neutral_design" title="Energy neutral design">Energy neutral</a></li>

<li><a href="Engineering_design_process" title="Engineering design process">Engineering design process</a>

<ul><li><a href="Probabilistic_design" title="Probabilistic design">Probabilistic design</a></li></ul></li>

<li><a href="Ergonomic_design" class="mw-redirect" title="Ergonomic design">Ergonomic</a></li>

<li><a href="Error-tolerant_design" title="Error-tolerant design">Error-tolerant</a></li>

<li><a href="Evidence-based_design" title="Evidence-based design">Evidence-based</a></li>

<li><a href="Fault-tolerant_design" class="mw-redirect" title="Fault-tolerant design">Fault-tolerant</a></li>

<li><a href="Feminist_design" title="Feminist design">Feminist</a></li>

<li><a href="Design_for_assembly" title="Design for assembly">For assembly</a></li>

<li><a href="Behavioural_design" title="Behavioural design">For behaviour change</a></li>

<li><a href="Design_for_manufacturability" title="Design for manufacturability">For manufacturability</a></li>

<li><a href="Design_for_Six_Sigma" title="Design for Six Sigma">For Six Sigma</a></li>

<li><a href="Design_for_testing" title="Design for testing">For testing</a></li>

<li><a href="Design_for_the_environment" title="Design for the environment">For the environment</a></li>

<li><a href="Framework-oriented_design" title="Framework-oriented design">Framework-oriented</a></li>

<li><a href="Functional_design" title="Functional design">Functional</a></li>

<li><a href="Generative_design" title="Generative design">Generative</a></li>

<li><a href="Geodesign" title="Geodesign">Geodesign</a></li>

<li><a href="High-level_design" title="High-level design">High-level</a></li>

<li><a href="Hostile_design" class="mw-redirect" title="Hostile design">Hostile</a></li>

<li><a href="Inclusive_design" title="Inclusive design">Inclusive</a></li>

<li><a href="Integrated_design" title="Integrated design">Integrated</a></li>

<li><a href="Integrated_topside_design" title="Integrated topside design">Integrated topside</a></li>

<li><a href="Intelligence-based_design" title="Intelligence-based design">Intelligence-based</a></li>

<li><a href="Iterative_design" title="Iterative design">Iterative</a></li>

<li><a href="KISS_principle" title="KISS principle">KISS principle</a></li>

<li><a href="Low-level_design" title="Low-level design">Low-level</a></li>

<li><a href="Metadesign" title="Metadesign">Metadesign</a></li>

<li><a href="Mind_map" title="Mind map">Mind mapping</a></li>

<li><a href="Modular_design" title="Modular design">Modular</a></li>

<li><a href="Object-oriented_design" class="mw-redirect" title="Object-oriented design">Object-oriented</a></li>

<li><a href="Parametric_design" title="Parametric design">Parametric</a></li>

<li><a href="Participatory_design" title="Participatory design">Participatory</a></li>

<li><a href="Platform-based_design" title="Platform-based design">Platform-based</a></li>

<li><a href="Policy-based_design" class="mw-redirect" title="Policy-based design">Policy-based</a></li>

<li><a href="Prevention_through_design" title="Prevention through design">Prevention through</a></li>

<li><a href="Process-centered_design" title="Process-centered design">Process-centered</a></li>

<li><a href="Public_interest_design" title="Public interest design">Public interest</a>

<ul><li><a href="Opinion_poll" title="Opinion poll">Opinion poll</a></li>

<li><a href="Public_opinion" title="Public opinion">Public opinion</a></li></ul></li>

<li><a href="Rational_design" title="Rational design">Rational</a></li>

<li><a href="Regenerative_design" title="Regenerative design">Regenerative</a></li>

<li><a href="Reliability_engineering" title="Reliability engineering">Reliability engineering</a></li>

<li><a href="Research-based_design" title="Research-based design">Research-based</a></li>

<li><a href="Responsibility-driven_design" title="Responsibility-driven design">Responsibility-driven</a></li>

<li><a href="Speculative_design" title="Speculative design">Speculative</a></li>

<li><a href="Sustainable_design" title="Sustainable design">Sustainable</a></li>

<li><a href="Systemic_design" title="Systemic design">Systemic</a>

<li><a href="Tableless_web_design" title="Tableless web design">Tableless web</a></li>

<li><a href="Theory_of_constraints" title="Theory of constraints">Theory of constraints</a></li>

<li><a href="Top-down_and_bottom-up_design" class="mw-redirect" title="Top-down and bottom-up design">Top-down and bottom-up</a></li>

<li><a href="Transformation_design" title="Transformation design">Transformation</a></li>

<li><a href="Transgenerational_design" title="Transgenerational design">Transgenerational</a></li>

<li><a href="Universal_design" title="Universal design">Universal</a>

<ul><li><a href="Design_for_All_(in_ICT)" title="Design for All (in ICT)">Design for All</a></li></ul></li>

<li><a href="Usage-centered_design" title="Usage-centered design">Usage-centered</a></li>

<li><a href="Use-centered_design" title="Use-centered design">Use-centered</a></li>

<li><a href="User-centered_design" title="User-centered design">User-centered</a>

<ul><li><a href="Empathic_design" title="Empathic design">Empathic</a></li></ul></li>

<li><a href="User_innovation" title="User innovation">User innovation</a></li>

<li><a href="Value-driven_design" title="Value-driven design">Value-driven</a></li>

<li><a href="Value_sensitive_design" title="Value sensitive design">Value sensitive</a>

<ul><li><a href="Privacy_by_design" title="Privacy by design">Privacy by</a></li>

<li><a href="Quality_by_design" title="Quality by design">Quality by</a></li>

<li><a href="Secure_by_design" title="Secure by design">Secure by</a></li></ul></li></ul>

<ul><li>Design <a href="Design_choice" title="Design choice">choice</a></li>

<li><a href="Design_computing" title="Design computing">computing</a></li>

<li><a href="Design_controls" title="Design controls">controls</a></li>

<li><a href="Design_culture" title="Design culture">culture</a></li>

<li><a href="Design_justice" class="mw-redirect" title="Design justice">justice</a></li>

<li><a href="Design_leadership" title="Design leadership">leadership</a></li>

<li><a href="Design_management" title="Design management">management</a></li>

<li><a href="Design_marker" title="Design marker">marker</a></li>

<li><a href="Design_methods" title="Design methods">methods</a></li>

<li><a href="Design_pattern" title="Design pattern">pattern</a></li>

<li><a href="Design_research" title="Design research">research</a></li>

<li><a href="Design_science" title="Design science">science</a></li>

<li><a href="Design_sprint" title="Design sprint">sprint</a></li>

<li><a href="Design_strategy" class="mw-redirect" title="Design strategy">strategy</a></li>

<li><a href="Design_theory" title="Design theory">theory</a></li>

<li><a href="Design_thinking" title="Design thinking">thinking</a></li></ul>

</div></td></tr></tbody></table><div></div></td></tr><tr><td colspan="2" class="navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em"></div><table class="nowraplinks mw-collapsible mw-collapsed navbox-subgroup" style="border-spacing:0"><tbody><tr><th scope="col" class="navbox-title" colspan="2"><div id="ToolsIntellectual_propertyOrganizationsAwards56" style="font-size:114%;margin:0 4em"><div class="hlist"><ul><li>Tools</li><li>Intellectual property</li><li>Organizations</li><li>Awards</li></ul></div></div></th></tr><tr><td colspan="2" class="navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em"></div><table class="nowraplinks navbox-subgroup" style="border-spacing:0"><tbody><tr><th scope="row" class="navbox-group" style="width:1%"><a href="Design_tool" title="Design tool">Tools</a></th><td class="navbox-list-with-group navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em">

<li><a href="Architectural_model" title="Architectural model">Architectural model</a></li>

<li><a href="Blueprint" title="Blueprint">Blueprint</a></li>

<li><a href="Comprehensive_layout" title="Comprehensive layout">Comprehensive layout</a></li>

<li><a href="Virtual_home_design_software" title="Virtual home design software">Virtual home design software</a></li></ul></li>

<li><a href="Computer-automated_design" title="Computer-automated design">CAutoD</a></li>

<li><a href="Design_quality_indicator" title="Design quality indicator">Design quality indicator</a></li>

<li><a href="Electronic_design_automation" title="Electronic design automation">Electronic design automation</a></li>

<li><a href="Flowchart" title="Flowchart">Flowchart</a></li>

<li><a href="Mockup" title="Mockup">Mockup</a></li>

<li><a href="Design_specification" title="Design specification">Design specification</a></li>

<li><a href="Design_system" title="Design system">Design system</a></li>

<li><a href="Prototype" title="Prototype">Prototype</a></li>

<li><a href="Sketch_(drawing)" title="Sketch (drawing)">Sketch</a></li>

<li><a href="Storyboard" title="Storyboard">Storyboard</a></li>

<li><a href="Technical_drawing" title="Technical drawing">Technical drawing</a></li>

<li><a href="HTML_editor" title="HTML editor">HTML editor</a></li>

<li><a href="Website_wireframe" title="Website wireframe">Website wireframe</a></li></ul>

</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Intellectual<br>property</th><td class="navbox-list-with-group navbox-list navbox-even" style="width:100%;padding:0"><div style="padding:0 0.25em">

<ul><li><a href="Clean-room_design" title="Clean-room design">Clean-room design</a></li>

<li><a href="Community_design" class="mw-redirect" title="Community design">Community design</a></li>

<li><a href="Design_around" title="Design around">Design around</a></li>

<li><a href="Design_infringement" title="Design infringement">Design infringement</a></li>

<li><a href="Design_patent" title="Design patent">Design patent</a></li>

<li><a href="Fashion_design_copyright" title="Fashion design copyright">Fashion design copyright</a></li>

<li><i><a href="Geschmacksmuster" title="Geschmacksmuster">Geschmacksmuster</a></i></li>

<li><a href="Industrial_design_right" title="Industrial design right">Industrial design rights</a>

<ul><li><a href="Industrial_design_rights_in_the_European_Union" title="Industrial design rights in the European Union">European Union</a></li></ul></li></ul>

</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Organizations</th><td class="navbox-list-with-group navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em">

<ul><li><a href="American_Institute_of_Graphic_Arts" title="American Institute of Graphic Arts">American Institute of Graphic Arts</a></li>

<li><a href="Chartered_Society_of_Designers" title="Chartered Society of Designers">Chartered Society of Designers</a></li>

<li><a href="Design_and_Industries_Association" title="Design and Industries Association">Design and Industries Association</a></li>

<li><a href="Design_Council" title="Design Council">Design Council</a></li>

<li><a href="International_Forum_Design" title="International Forum Design">International Forum Design</a></li>

<li><a href="Design_Research_Society" title="Design Research Society">Design Research Society</a></li></ul>

</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Awards</th><td class="navbox-list-with-group navbox-list navbox-even" style="width:100%;padding:0"><div style="padding:0 0.25em">

<ul><li><a href="European_Design_Award" class="mw-redirect" title="European Design Award">European Design Award</a></li>

<li><a href="German_Design_Award" title="German Design Award">German Design Award</a></li>

<li><a href="Good_Design_Award_(Museum_of_Modern_Art)" title="Good Design Award (Museum of Modern Art)">Good Design Award (Museum of Modern Art)</a></li>

<li><a href="Good_Design_Award_(Chicago_Athenaeum)" class="mw-redirect" title="Good Design Award (Chicago Athenaeum)">Good Design Award (Chicago Athenaeum)</a></li>

<li><a href="Graphex" class="mw-redirect" title="Graphex">Graphex</a></li>

<li><a href="IF_Product_Design_Award" title="IF Product Design Award">IF Product Design Award</a></li>

<li><a href="James_Dyson_Award" title="James Dyson Award">James Dyson Award</a></li>

<li><a href="Prince_Philip_Designers_Prize" title="Prince Philip Designers Prize">Prince Philip Designers Prize</a></li></ul>

</div></td></tr></tbody></table><div></div></td></tr></tbody></table><div></div></td></tr><tr><td colspan="2" class="navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em"></div><table class="nowraplinks mw-collapsible mw-collapsed navbox-subgroup" style="border-spacing:0"><tbody><tr><th scope="col" class="navbox-title" colspan="2"><div id="Related_topics56" style="font-size:114%;margin:0 4em">Related topics</div></th></tr><tr><td colspan="2" class="navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em">

<ul><li><a href="Agile_software_development" title="Agile software development">Agile</a></li>

<li><a href="Concept_art" title="Concept art">Concept art</a></li>

<li><a href="Conceptual_design" title="Conceptual design">Conceptual design</a></li>

<li><a href="Creative_industries" title="Creative industries">Creative industries</a></li>

<li><a href="Cultural_icon" title="Cultural icon">Cultural icon</a></li>

<li><a href=".design" title=".design">.design</a></li>

<li><a href="Dominant_design" title="Dominant design">Dominant design</a></li>

<li><a href="Enterprise_architecture" title="Enterprise architecture">Enterprise architecture</a></li>

<li><a href="Form_factor_(design)" title="Form factor (design)">Form factor</a></li>

<li><a href="Futures_studies" title="Futures studies">Futures studies</a></li>

<li><a href="Indie_design" title="Indie design">Indie design</a></li>

<li><a href="Innovation_management" title="Innovation management">Innovation management</a></li>

<li><a href="Intelligent_design" title="Intelligent design">Intelligent design</a></li>

<li><a href="Lean_startup" title="Lean startup">Lean startup</a></li>

<li><a href="New_product_development" title="New product development">New product development</a></li>

<li><a href="Philosophy_of_design" title="Philosophy of design">Philosophy of design</a></li>

<li><a href="Process_simulation" title="Process simulation">Process simulation</a></li>

<li><a href="Reference_design" title="Reference design">Reference design</a></li>

<li><a href="Slow_design" class="mw-redirect" title="Slow design">Slow design</a></li>

<li><a href="STEAM_fields" class="mw-redirect" title="STEAM fields">STEAM fields</a></li>

<li><a href="Argument_from_poor_design" title="Argument from poor design">Unintelligent design</a></li>

<li><a href="Visualization_(graphics)" title="Visualization (graphics)">Visualization</a></li>

<li><a href="Wicked_problem" title="Wicked problem">Wicked problem</a></li></ul>

<ul><li>Design <a href="List_of_system_quality_attributes" title="List of system quality attributes">attributes</a></li>

<li><a href="Design_brief" title="Design brief">brief</a></li>

<li><a href="Design_change" title="Design change">change</a></li>

<li><a href="Design_classic" title="Design classic">classic</a></li>

<li><a href="Design_competition" title="Design competition">competition</a>

<ul><li><a href="Architectural_design_competition" title="Architectural design competition">architectural</a></li>

<li><a href="Student_design_competition" title="Student design competition">student</a></li></ul></li>

<li><a href="Design_director" title="Design director">director</a></li>

<li><a href="Design_education" title="Design education">education</a></li>

<li><a href="Design_elements" title="Design elements">elements</a></li>

<li><a href="Design_engineer" title="Design engineer">engineer</a></li>

<li><a href="Design_history" title="Design history">history</a></li>

<li><a href="Design_knowledge" title="Design knowledge">knowledge</a></li>

<li><a href="Design_museum" title="Design museum">museum</a></li>

<li><a href="Design_optimization" title="Design optimization">optimization</a></li>

<li><a href="Design_paradigm" title="Design paradigm">paradigm</a></li>

<li><a href="Design_principles" title="Design principles">principles</a></li>

<li><a href="Design_rationale" title="Design rationale">rationale</a></li>

<li><a href="Design_review" title="Design review">review</a></li>

<li><a href="Design_specification" title="Design specification">specification</a></li>

<li><a href="Design_studies" title="Design studies">studies</a></li>

<li><a href="Design_studio" class="mw-redirect" title="Design studio">studio</a></li>

<li><a href="Design_technology" title="Design technology">technology</a></li></ul>

</div></td></tr></tbody></table><div></div></td></tr></tbody></table></div></div><div><div class="zim-footer">

This article is issued from <a class="external text" title="Last edited on 2025-08-07" href="https://en.wikipedia.org/wiki/?title=Design_language&oldid=1304681394">Wikipedia</a>. The text is available under <a class="external text" href="https://creativecommons.org/licenses/by-sa/4.0/deed.en">Creative Commons Attribution-Share Alike 4.0</a> unless otherwise noted. Additional terms may apply for the media files.

</div>

</div></div>

</div>

</main>

</div>

</body></html>